<template>
  <view class="edit-wrapper">
    <view class="edit-header">
      <view class="edit-header-left">
        <text>编辑现场资源</text>
      </view>
    </view>

    <scroll-view class="edit-content" scroll-y>
      <view v-if="loading" class="loading-wrapper">
        <text>加载中...</text>
      </view>

      <view v-else class="form-wrapper">
        <view class="form-item">
          <text class="form-label">标段:</text>
          <input class="form-input" v-model="editForm.bid" placeholder="请输入标段" />
        </view>

        <view class="form-item">
          <text class="form-label">公司名称:</text>
          <input class="form-input" v-model="editForm.company" placeholder="请输入公司名称" />
        </view>

        <view class="form-item">
          <text class="form-label">分包公司:</text>
          <input class="form-input" v-model="editForm.subcontractCompany" placeholder="请输入分包公司" />
        </view>

        <view class="form-item">
          <text class="form-label">管理人员数:</text>
          <input class="form-input" v-model="editForm.managerNum" type="number" placeholder="请输入管理人员数" />
        </view>

        <view class="form-item">
          <text class="form-label">作业人员数:</text>
          <input class="form-input" v-model="editForm.workNum" type="number" placeholder="请输入作业人员数" />
        </view>

        <view class="form-item">
          <text class="form-label">设备名称描述:</text>
          <input class="form-input" v-model="editForm.deviceName" placeholder="请输入设备名称描述" />
        </view>

        <view class="form-item">
          <text class="form-label">设备数量:</text>
          <input class="form-input" v-model="editForm.deviceNum" type="number" placeholder="请输入设备数量" />
        </view>

        <view class="form-item">
          <text class="form-label">钢筋总量:</text>
          <input class="form-input" v-model="editForm.rebar" type="digit" placeholder="请输入钢筋总量" />
        </view>

        <view class="form-item">
          <text class="form-label">水泥总量:</text>
          <input class="form-input" v-model="editForm.cement" type="digit" placeholder="请输入水泥总量" />
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="edit-footer">
      <view class="btn-group">
        <view class="cancel-btn" @click="goBack">
          <text class="cancel-text">取消</text>
        </view>
        <view class="save-btn" @click="saveEdit" :class="{ 'save-btn-loading': saveLoading }">
          <text class="save-text">{{ saveLoading ? '保存中...' : '保存' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getResourceDetail, saveOrUpdateResource } from '@/api/resources'

const loading = ref(false)
const saveLoading = ref(false)
const resourceId = ref('')
const editForm = ref({
  id: '',
  bid: '',
  company: '',
  subcontractCompany: '',
  managerNum: '',
  workNum: '',
  deviceName: '',
  deviceNum: '',
  rebar: '',
  cement: ''
})

// 获取资源详情
const getResourceDetailData = async () => {
  if (!resourceId.value) return

  loading.value = true
  const res = await getResourceDetail(resourceId.value)
  loading.value = false

  if (res && res.code === 0 && res.data) {
    const data = res.data
    editForm.value = {
      id: data.id || '',
      bid: data.bid || '',
      company: data.company || '',
      subcontractCompany: data.subcontractCompany || '',
      managerNum: data.managerNum || '',
      workNum: data.workNum || '',
      deviceName: data.deviceName || '',
      deviceNum: data.deviceNum || '',
      rebar: data.rebar || '',
      cement: data.cement || ''
    }
  }
}

// 保存编辑
const saveEdit = async () => {
  // 表单验证
  if (!editForm.value.bid) {
    uni.showToast({
      title: '请输入标段',
      icon: 'none'
    })
    return
  }

  if (!editForm.value.company) {
    uni.showToast({
      title: '请输入公司名称',
      icon: 'none'
    })
    return
  }

  saveLoading.value = true
  const res = await saveOrUpdateResource(editForm.value)
  saveLoading.value = false

  if (res && res.code === 0) {
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })

    // 发送事件通知上一页刷新数据
    uni.$emit('refreshResourceList')

    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } else {
    uni.showToast({
      title: res?.msg || '保存失败',
      icon: 'none'
    })
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}

  if (options.id) {
    resourceId.value = options.id
    getResourceDetailData()
  }
})
</script>

<style scoped>
.edit-wrapper {
  padding: 20rpx;
  background-color: #f9f9f9;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  flex-shrink: 0;
}

.edit-header-left text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.edit-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  color: #999;
}

.form-wrapper {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
  margin-bottom: 120rpx;
}

.form-item {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  width: 180rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.form-input {
  flex: 1;
  height: 70rpx;
  background: #fbfbfb;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.form-input:focus {
  border-color: #1890ff;
  background: #fff;
}

.edit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.btn-group {
  display: flex;
  gap: 20rpx;
}

.cancel-btn,
.save-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
}

.cancel-btn {
  background: #f9f9f9;
  color: #666;
}

.cancel-btn:active {
  background: #e8e8e8;
}

.save-btn {
  background: #1890ff;
  color: #fff;
}

.save-btn:active {
  background: #096dd9;
}

.save-btn-loading {
  background: #91d5ff !important;
  pointer-events: none;
}

.cancel-text,
.save-text {
  font-size: 28rpx;
  font-weight: 500;
}

/* 防止页面滚动 */
page {
  height: 100%;
  overflow: hidden;
}
</style>
